<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>管理后台</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
    <link rel="icon" href="__STATIC__/manage/assets/img/icon.ico" type="image/x-icon"/>

    <!-- Fonts and icons -->
    <script src="__STATIC__/manage/assets/js/plugin/webfont/webfont.min.js"></script>
    <script>
        WebFont.load({
            google: {"families":["Lato:300,400,700,900"]},
            custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['__STATIC__/manage/assets/css/fonts.min.css']},
            active: function() {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="__STATIC__/manage/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="__STATIC__/manage/assets/css/atlantis.min.css">

    <style>
        #codeimgclick {
            width: 35%;
            margin-left: 50%;
            height: 42px;
            position: absolute;
            bottom: 10px;
            border-radius: .25rem;
        }

        #verifycode{
            width: 50%;
        }

        #userlogin{
            width: 30%;
        }
        .page-title{
            text-align: center;
        }
    </style>
</head>
<body>

<div class="page-inner">
    <div class="page-header">
        <h4 class="page-title">沐雨晨光管理后台</h4>
    </div>
    <div class="row">
        <div class="col-md-6 ml-auto mr-auto">
            <div class="card">
                <div class="card-header">
                    <div class="card-title" style="text-align: center">登录</div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 ml-auto mr-auto col-lg-6">
                            <div class="form-group">
                                <label for="phone">用户名</label>
                                <input type="email" class="form-control" id="phone" name="phone" placeholder="用户名">
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                            </div>

                            <div class="form-group">
                                <label for="verifycode">验证码</label>
                                <input type="text" class="form-control" id="verifycode" name="verifycode" placeholder="验证码">
                                <img src="{:captcha_src()}" id="codeimgclick">
                            </div>

                        </div>
                    </div>
                </div>
                <div class="card-action">
                    <button class="btn btn-success" id="userlogin" style="margin-left: 30%;">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="__STATIC__/manage/assets/js/core/jquery.3.2.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/manage/lib/layer/2.4/layer.js"></script>

<script>

    $("#codeimgclick").click(function () {
        this.src='/captcha.html'+'?'+Math.random();
    });

    var SCOPE = {
        'login_url':"{:url('login/index')}",
    };


    // 登录
    var flaglogin = false;
    $("#userlogin").click(function () {
        var phone = $("#phone").val();
        var password = $("#password").val();
        var verifycode = $("#verifycode").val();


        if(phone == ''){
            layer.msg('请填写用户名',{icon:2,time:2000});flaglogin = false;
            return false;
        }
        if(password == ''){
            layer.msg('请填写密码',{icon:2,time:2000});flaglogin = false;
            return false;
        }
        if(verifycode == ''){
            layer.msg('请填写图形验证码',{icon:2,time:2000});flaglogin = false;
            return false;
        }


        $.ajax({
            type: 'POST',
            url: SCOPE.login_url,
            dataType: 'json',
            data:{
                phone:phone,password:password,code:verifycode
            },
            success: function(data){

                if(data.code == 1001){
                    layer.msg('登录成功', {
                        icon: 1,
                        time: 2000
                    }, function(){
                        window.location.href="{:url('index/index')}";
                    });
                }else{
                    flaglogin = false;
                    $("#codeimgclick").attr('src','/captcha.html'+'?'+Math.random());
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            },
            error: function(data){
                flaglogin = false;
                layer.msg('网络错误,稍后再试...',{icon:2,time:2000});
            }
        })
    });


    // 验证手机号
    function isPhoneAvailable(str){
        var phoneReg = /^[1][3456789][0-9]{9}$/;
        if(!phoneReg.test(str)) {
            return false;
        }else{
            return true;
        }
    }


</script>